<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="initiateTeam-box">
		<view class="notice-box" v-if="noticeText">
			<up-notice-bar bgColor="#222528" color="#7CDEC7" :text="noticeText"></up-notice-bar>
		</view>
		<!-- 赛制填写 -->
		<view class="from-system">
			<text class="name">比赛信息</text>
			<view class="from-box">
				<view class="from-item flex-row-center">
					<text class="from-name">比赛人数</text>
					<up-number-box :step="4" v-model="contestInfo.personal">
						<template #minus>
							<view class="minus-btn flex-center">
								<up-icon name="minus" color="#0B2532" size="24rpx"></up-icon>
							</view>
						</template>
						<template #input>
							<!-- <text class="input-num">{{contestInfo.personal}}</text> -->
							<up-input border="none" inputAlign="center" :customStyle="{width:'80rpx',margin:'0 12rpx'}"
								placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
								v-model="contestInfo.personal"></up-input>
						</template>
						<template #plus>
							<view class="plus-btn flex-center">
								<up-icon name="plus" color="#102C38" size="24rpx"></up-icon>
							</view>
						</template>
					</up-number-box>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">人均预算</text>
					<view class="example-body flex-row-center" @click="()=>keyboardShow=true">
						<up-input border="none" type="digit" disabled placeholderClass="placeholderClass"
							fontSize="26rpx" color="#DEDEDE" placeholder="请填写人均预算"
							v-model="contestInfo.avg_amount"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">比赛门店</text>
					<view class="example-body flex-row-center">
						<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
							color="#DEDEDE" placeholder="请选择门店" v-model="contestInfo.store_name"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">举办地址</text>
					<view class="example-body flex-row-center">
						<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
							color="#DEDEDE" placeholder="请选择比赛地址" v-model="contestInfo.holding_address">
							<template #suffix>
								<up-icon @click="chooseLocationTap" name="map-fill" color="#DEDEDE"
									size="42rpx"></up-icon>
							</template>
						</up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">举办方</text>
					<view class="example-body flex-row-center">
						<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
							placeholder="请填写举办方" v-model="contestInfo.organizer"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">负责人</text>
					<view class="example-body flex-row-center">
						<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
							placeholder="请填写负责人" v-model="contestInfo.charge"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">联系方式</text>
					<view class="example-body flex-row-center">
						<up-input border="none" maxlength="11" type="number" placeholderClass="placeholderClass"
							fontSize="26rpx" color="#DEDEDE" placeholder="请填写联系方式"
							v-model="contestInfo.mobile"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">举办时间</text>
					<view class="example-body flex-row-center" @click="timeShow=true">
						<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
							color="#DEDEDE" placeholder="请选择举办时间" v-model="contestInfo.holding_time"></up-input>
						<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
					</view>
				</view>

			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit-box flex-center">
			<up-button text="立即提交" @click="submitmatch" :customStyle="{'color':'#115B56'}"
				:loading="contestInfo.loading" loadingText="提交中"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" shape="circle"></up-button>
		</view>
		<!-- 时间选择组件 -->
		<up-datetime-picker :show="timeShow" :minDate="Date.now()" v-model='nowTime' @cancel="timeShow=false"
			@confirm="confirmGameTime" mode="datetime"></up-datetime-picker>
	</view>
	<up-keyboard ref="uKeyboard" @confirm="keyConfirm" mode="number" tips="输入报名费用" @cancel='()=>keyboardShow=false'
		@change="valChange" @backspace="backspace" :overlay="false" :show="keyboardShow"></up-keyboard>
</template>

<script setup>
	import {
		formatDate,
		countDecimalPlaces
	} from '@/utils/utools.js';
	import choseStroe from '@/page_store/components/choseStore.vue';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	import {
		test
	} from '@/uni_modules/uview-plus';
	import {
		matchInfoStore
	} from '@/stores/match';
	const matchStore = matchInfoStore();
	const peopleShow = ref(false);
	const datetimeStartShow = ref(false);
	const datetimeEndShow = ref(false);
	const statusShow = ref(false);
	const noticeText = ref('');
	const contestInfo = reactive({
		personal: 2,
		avg_amount: '',
		holding_time: '',
		store_id: '',
		store_name: '',
		holding_address: '',
		organizer: '',
		charge: '',
		mobile: '',
		loading: false
	});
	const rules = {
		name: {
			personal: true,
			msg: '请填写正确的参赛人数'
		},
		avg_amount: {
			required: true,
			msg: '请填写正确的人均预算'
		},
		holding_time: {
			required: true,
			msg: '请选择举办时间'
		},
		store_id: {
			required: true,
			msg: '请选择举办门店'
		},
		charge: {
			required: true,
			msg: '请填写举办负责人'
		},
		mobile: {
			required: true,
			msg: '请填写联系方式'
		}
	};
	const nowTime = Date.now(); //当前时间
	const timeShow = ref(false);
	const storeShow = ref(false);
	const keyboardShow = ref(false);
	onLoad((option) => {
		if (option.storeId) {
			contestInfo.store_id = option.storeId;
			contestInfo.store_name = option.storeName;
			getMatchState(option.storeId);
		}
	});
	// onUnload(() => {
	// 	matchStore.setResubmitMatch(null);
	// })
	const confirmGameTime = (e) => { //选择比赛时间
		if (e.value) {
			contestInfo.holding_time = formatDate(e.value, 'yyyy-MM-dd hh:mm');
			timeShow.value = false;
		}
	}
	const closeStoreShow = () => { //关闭选择门店弹窗
		storeShow.value = false;
	};
	const keyConfirm = () => { //键盘得确认按钮
		if (!test.amount(contestInfo.avg_amount)) {
			uni.$u.toast('请输入正确的金额');
			return
		}
		keyboardShow.value = false;
	};
	const valChange = (val) => {
		// 将每次按键的值拼接到value变量中，注意+=写法
		if (countDecimalPlaces(contestInfo.avg_amount) >= 2) return
		contestInfo.avg_amount += val;
	};
	const backspace = () => {
		// 删除value的最后一个字符
		if (contestInfo.avg_amount.length) {
			contestInfo.avg_amount = contestInfo.avg_amount.substr(0, contestInfo.avg_amount.length - 1);
		}
	};
	const chooseStore = (item) => { //选择门店
		contestInfo.store_name = item.store_name;
		contestInfo.store_id = item.id;
		storeShow.value = false;
	}
	const chooseLocationTap = async () => { //选择地理位置
		const res = await chooseLocation('', '', true);
		if (res) {
			contestInfo.holding_address = res.address + (res.name ? res.name : '');
		}
	}
	const getMatchState = async (id) => { //获取状态啊
		const res = await $Api.match.getMatchState({
			store_id: id
		}, true);
		if (res.code === 1) {
			if (res.data) {
				let statusText = '正在审核中';
				if (res.data.status == 3) {
					statusText = '已被拒绝，可在比赛中心查看拒绝原因';
				} else if (res.data.status == 1) {
					statusText = '已经通过';
				}
				noticeText.value = `您在${res.data?.create_time_text}时间申请的比赛${statusText}`
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const submitmatch = async () => {
		if (contestInfo.loading) return
		const validate = validateForm(contestInfo, rules); //验证
		if (!validate.status) return
		if (!test.amount(contestInfo.avg_amount)) {
			uni.$u.toast('请输入正确的金额');
			return
		}
		contestInfo.loading = true;
		const res = await $Api.match.submitMatch({
			personal: contestInfo.personal,
			avg_amount: contestInfo.avg_amount,
			holding_time: contestInfo.holding_time,
			store_id: contestInfo.store_id,
			holding_address: contestInfo.holding_address,
			organizer: contestInfo.organizer,
			charge: contestInfo.charge,
			mobile: contestInfo.mobile,
			store_name: contestInfo.store_name
		});
		if (res.code === 1) {
			uni.showToast({
				title: '提交成功'
			});
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		} else {
			contestInfo.loading = false;
			uni.$u.toast(res.msg);
		}
	}
</script>

<style lang="scss" scoped>
	.initiateTeam-box {
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.notice-box {
		margin-bottom: 20rpx;
	}

	.from-system {
		padding: 40rpx 28rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 20rpx;
		background-color: #222528;
		margin-bottom: 32rpx;

		.name {
			text-align: center;
			width: 100%;
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			color: #E2E3E3;
		}

		.marB {
			margin-bottom: 28rpx;
		}
	}

	.from-box {
		width: 100%;

		.from-item {
			box-sizing: border-box;
			width: 100%;
			padding: 30rpx 0;
			justify-content: space-between;

			&:not(:last-child) {
				border-bottom: 2rpx solid #2B2E31;
			}

			.from-name {
				display: block;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				width: 120rpx;
				margin-right: 38rpx;
			}

			.up-textarea-box {
				color: #fff;
			}



		}

		::v-deep.placeholderClass {
			color: #5B6868 !important;
			font-size: 26rpx;
			font-weight: 500;
		}

		.price-icon {
			font-weight: 500;
			font-size: 28rpx;
			color: #C2C3C4;
		}

		.minus-btn {
			width: 42rpx;
			height: 42rpx;
			background: #A7A8A9;
			border-radius: 4rpx;
			border-radius: 50%;
		}

		.input-num {
			width: 64rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}

		.plus-btn {
			width: 42rpx;
			height: 42rpx;
			background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 50%;
		}

		.example-body {
			flex: 1;
			justify-content: flex-end;

			.example-icon {
				font-size: 28rpx;
				color: #fff;
				margin: 0 24rpx;
			}
		}

		.vipLv-body {
			flex: 1;
			justify-content: space-between;

			.vipLv-item {
				width: 138rpx;
				height: 72rpx;
				background: #383B3E;
				border-radius: 36rpx;

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #EAF8F5;
				}
			}

			.active-vip {
				width: 138rpx;
				height: 72rpx;
				background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
				box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 36rpx;

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #0A534F;
				}
			}
		}
	}

	.upload-box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		background-color: #36393B;
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 16rpx;
			color: rgba(255, 255, 255, 0.3);
		}
	}

	.submit-box {
		width: 336rpx;
		height: 84rpx;
		margin: 48rpx auto;
	}
</style>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}
</style>